<template>
	<div>
		<el-container>
			<el-header>
				<div class="back" @click="back">返回</div>
				<div style="font-size: 24px; color: #565556;">选择模板</div>
			</el-header>
			<el-main>
				<div style="padding:0 100px ;">
					<h2>模板：</h2>
					<div class="flex tempo">
						<div class="temp" v-for="(item,index) in list" :key="index">
							<img src="https://pic4.zhimg.com/v2-3bdf9442cd55d69647b76d993a90b537_b.jpg" />
							<div class="xia">
								<a href="./public/static/file/下载文件.docx" download="模板.docx">点击下载</a>
							</div>
							<div>模板名称</div>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{},{},{},{},{},{},{},{},{},{},{},{}
				],
				downUrl:'',
				downTplNm:'',
				downNm:''
			}
		},
		methods:{
			back() {
				this.$router.push({path:'/'})
			},
			downloadItem (url) {
			        // 为了简单起见这里blob的mime类型 固定写死了
				let blob = 'app.docx'
				let link = document.createElement('a')
				link.href = window.URL.createObjectURL(blob)
				link.download = url.split('/').pop()
				link.click()
			     
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	a{
		text-decoration: none;
		color: #FFFFFF;
	}
	.xia{
		width: 100px;
		height: 40px;
		border: 1px solid #eaeaea;
		line-height: 40px;
		border-radius: 5px;
		position: absolute;
		top: 40%;
		left: 30%;
		color: #eaeaea;
		z-index: 100;
	}
	.xia:hover{}
	.tempo{
		width: 100%;
	}
	.ovec{
	}
	.temp:hover{
		display: block;
	}
	.temp{
		position: relative;
		margin-bottom: 20px;
		width: 16%;
		height: 400px;
		margin-right: 0.6%;
		text-align: center;
		img{
			width: 100%;
			height: 90%;
		}
	}
	.temp:last-child{
		margin-right: 0;
	}
	.back{
		cursor: pointer;
		width: 100px;
		height: 40px;
		margin-top: 8px;
		line-height: 40px;
		position: absolute;
		
		border: 1px solid #d9d9d9;
		border-radius: 3px;
	}
	.el-header{
		position: relative;
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		border-bottom: 1px solid #ebebeb;
	  }
</style>
